.rightMenu {
  @apply absolute right-0 top-0 h-full flex items-center pl-5 z-inherit;
  margin-right: 3.375rem;

  .rightBtn {
    @apply w-7 h-full relative mr-10;

    & > img {
      @apply w-full h-7;
    }

    &.search {
      width: 25rem;
    }

    &.score {
      &:hover {
        .scoreImg {
          content: url('/images/score-active.png');
        }

        .btnScore {
          @apply flex;
        }
      }

      .btnScore {
        @apply absolute left-2/4 h-10 top-20 text-base text-white rounded hidden items-center justify-center;
        width: 7.5rem;
        transform: translateX(-50%);
        background-color: #262626;

        & > img {
          @apply ml-2 object-contain;
          width: 0.5rem;
          height: 0.875rem;
        }

        &::after {
          @apply absolute left-2/4 w-0 h-0;
          content: '';
          top: -0.625rem;
          transform: translateX(-50%);
          border-left: 0.625rem solid transparent;
          border-right: 0.625rem solid transparent;
          border-bottom: 0.75rem solid #262626;
        }
      }
    }

    &.download {
      &:hover {
        .btnDownload {
          @apply block;
        }
      }

      .btnDownload {
        @apply hidden absolute left-2/4 top-20;
        transform: translateX(-50%);
      }
    }

    &.vip {
      &:hover {
        .btnVip {
          @apply block;
        }
      }

      .btnVip {
        @apply hidden absolute left-2/4 top-20 pt-3 overflow-hidden rounded-lg;
        transform: translateX(-50%);
        width: 15rem;
        height: 10.625rem;
        background-image: url('/images/vip-head.webp');
        background-size: 100% 100%;
      }
    }

    &.join {
      &:hover {
        .joinClub {
          @apply flex;
        }
      }

      .joinClub {
        @apply absolute left-2/4 h-10 top-20 text-base text-white rounded hidden items-center justify-center;
        width: 7.5rem;
        transform: translateX(-50%);
        background-color: #262626;

        & > img {
          @apply ml-2 object-contain;
          width: 0.5rem;
          height: 0.875rem;
        }

        &::after {
          @apply absolute left-2/4 w-0 h-0;
          content: '';
          top: -0.625rem;
          transform: translateX(-50%);
          border-left: 0.625rem solid transparent;
          border-right: 0.625rem solid transparent;
          border-bottom: 0.75rem solid #262626;
        }
      }
    }
  }
}

// 移动端
@media screen and (max-width: 68.75rem) {
  .rightMenu {
    @apply mr-4;
  }
}
